<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /* 使用css 方式让文件框消失，让label触发点击事件*/
        .new-style {
            position: absolute !important;
            height: 1px;
            width: 1px;
            overflow: hidden;
            clip: rect(1px, 1px, 1px, 1px);
            display: none;
        }
        .new-style:focus + label {
            outline: thin dotted;
        }
        .new-style:focus-within + label {
            outline: thin dotted;
        }
    </style>
</head>
<body>
<form name="upload" method="POST" enctype="multipart/form-data" action="#">
    <!--第一种方案，原始，选择框不好看-->
    <!--<input type="file" name="myfile" class="myFile" multiple>-->

    <!--第二种方案，隐藏选择框，使用js手动调用 click()，可以优化上传按钮样式-->
    <!--<input type="file" name="myfile" class="myFile" multiple style="display: none">-->

    <!--第三种方案，CSS隐藏选择框，使用label for 特性自动调用click()，可以优化label样式-->
    <input type="file" id="myFile" name="myfile" class="myFile new-style" multiple>
    <label for="myFile">使用label上传文件</label>

    <input type="button" name="submit" value="上传" class="submit">
    <button type="button" class="cancelUpload">取消上传</button>
    <div id="progress"></div>
</form>
<script src="./index.js"></script>
</body>
</html>

